<template>
  <div>
    <div class="container">
      <div>
        <ol class="breadcrumb">
          <li><a href="#">工具箱</a></li>
          <li class="active">自助生成</li>
        </ol>
      </div>
      <div class="titlebox">
        <div class="title1">温馨提示：目前工具仅支持100M以内的IPA包，更大包请注册账号使用</div>
        <div class="title1">操作步骤：1.添加IPA文件、2.等待解析、3.添加证书&描述、4.点击开始生成</div>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="content">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="title">苹果IPA应用自助生成工具</div>
              </el-col>
              <div class="col-sm-offset-1 col-sm-11" style="z-index:99">
                <form class="form-horizontal frombox">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label" id="inputEmail3"><span class="red">*</span>
                      APP名称： </label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" v-model="appName" placeholder="添加IPA文件自动显示" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>包名ID： </label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" v-model="buildId" placeholder=" 添加IPA文件自动显示" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>APP版本： </label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control " v-model="appVersion" placeholder="添加IPA文件自动显示" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>ipa文件： </label>
                    <div class="col-sm-9 btnSelectBox">
                      <el-upload class="upload-demo buttonSelect" action="https://jsonplaceholder.typicode.com/posts/"
                        :auto-upload=false :on-change="handleChange1" :limit="1" :file-list="fileList1">
                        <el-button class="btn">点击选择</el-button>
                      </el-upload>
                      <input type="text" class="form-control ipt" v-model="fileName1" placeholder="无选择文件" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>描述： </label>
                    <div class="col-sm-9 btnSelectBox">
                      <el-upload class="upload-demo buttonSelect" action="https://jsonplaceholder.typicode.com/posts/"
                        :auto-upload=false :on-change="handleChange2" :limit="1" :file-list="fileList2">
                        <el-button class="btn">点击选择</el-button>
                      </el-upload> <input type="text" class="form-control ipt" v-model="fileName2"
                        placeholder="无选择文件" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>证书： </label>
                    <div class="col-sm-9 btnSelectBox">
                      <el-upload class="upload-demo buttonSelect" action="https://jsonplaceholder.typicode.com/posts/"
                        :auto-upload=false :on-change="handleChange3" :limit="1" :file-list="fileList3">
                        <el-button class="btn">点击选择</el-button>
                      </el-upload> <input type="text" class="form-control ipt" v-model="fileName3"
                        placeholder="无选择文件" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-3 control-label"><span class="red">* </span>证书密码：</label>
                    <div class="col-sm-9 btnSelectBox">
                      <input type="text" class="form-control" v-model="p12Password" placeholder="必填，空密码证书不可生成" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-6 col-sm-6">
                      <button type="submit" class="btn btn-default button_plist" @click="handelsignature">
                        立即生成
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </el-row>

          </div>
        </el-col>
      </el-row>
    </div>
    <statement></statement>
  </div>
</template>

<script>
  import statement from "@/components/common/statement";
  import server from "@/components/common/server";


  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      statement,
      server
    },
    data() {
      //这里存放数据
      return {
        appName: '',
        buildId: '',
        appVersion: '',
        p12Password: '',
        fileList1: [],
        fileList2: [],
        fileList3: [],
        file1: null,
        file2: null,
        file3: null,
        fileName1: '',
        fileName2: '',
        fileName3: '',
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleChange1(file, fileList) {
        console.log(file);
        this.file1 = file
        this.fileName1 = file.name
      },
      handleChange2(file, fileList) {
        this.file2 = file
        this.fileName2 = file.name

      },
      handleChange3(file, fileList) {
        this.file3 = file
        this.fileName3 = file.name
      },
      handelsignature() {
        var params = new URLSearchParams();
        params = new FormData(); //这种是通过form表单提交，可以提交文件
        params.append("appName", String(this.appName));
        params.append("buildId", String(this.buildId));
        params.append("appVersion", String(this.appVersion));
        params.append("p12Password", String(this.p12Password));
        params.append("ipafile", this.file1.raw);
        params.append("mobilefile", this.file2.raw);
        params.append("p12file", this.file3.raw);
        this.$post(this.API.selfhelp, params).then((res) => {
          console.log(123);
          console.log(res);
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .breadcrumb {
    margin: 20px 0px 0px 0px;
    background-color: transparent;
  }

  .content {
    background: #ffffff;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  .title {
    text-align: center;
    margin-top: 50px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
  }

  .frombox {
    max-width: 700px;
    margin-top: 46px;
    margin-left: 10px;
  }

  .col-sm-3 {
    padding-right: 0px !important;
  }

  div>>>.button_plist {
    width: 160px;
    height: 36px;
    color: #ffffff;
    margin-top: 40px;
    margin-bottom: 40px;
    background: #167df1;
    border-radius: 4px;
    padding: 0px;
  }

  .titlebox {
    width: 100%;
    height: 96px;
    background-color: #FF0E0E;
    font-size: 20px;
    color: #fff;
    overflow: hidden;
  }

  .title1 {
    margin-left: 22%;
  }

  .title1:nth-child(1) {
    margin-top: 20px;
  }

  .title1:nth-child(2) {
    margin-bottom: 20px;
  }

  .red {
    color: #FF0000;
  }

  .btnSelectBox {
    position: relative;
  }

  div>>>.buttonSelect {
    position: absolute;
    top: 0;
    left: 15px;
    width: 76px;
    height: 36px;
    background-color: #9CC3FF;
    text-align: center !important;
    padding: 0;
    color: #fff;
  }

  .form-control {
    height: 36px;
  }

  .ipt {
    padding-left: 90px;
  }

  div>>>input[type=file] {
    display: none;
  }

  div>>>.el-upload-list__item-name {
    display: none;
  }

  div>>>.btn {
    padding: 0;
    width: 78px;
    height: 36px;
    background-color: #9CC3FF;
    color: #fff;
  }

  div>>>.btn:focus {
    outline: none;
  }

</style>
